<template>
	<view class="content">
		<view class="sectionName">{{sectionName}}</view>
		
		<view class="list">
			<view class="card" v-for="(item, index) in rows" :key="index" :data-row="item" @click.stop="onTap">
				<view class="item_row" style="padding: 16rpx;">
					<view class="item_col">
						<view class="item_col_title">{{item.componentGoodsName}}</view>
						<view class="item_col_subTitle">{{item.componentType}}</view>
					</view>
					<view class="item_status" :class="item.runStatus == 1 ? 'normal' : 'error'">{{item.runStatus == 1 ? '正常' : '异常'}}</view>
				</view>
				<view class="item_detail_content" :class="item.runStatus == 1 ? 'normal_bkg' : 'error_bkg'">
					<view class="item_row" v-for="(it,idx) in elelist(item)" :key="idx">
						<view class="item_detail_name">{{it.name}}</view>
						<view class="item_row_2">
							<view class="item_detail_value">{{it.value}}</view>
							<image :src="it.icon" mode="aspectFit" style="width: 18rpx;height: 21rpx;"></image>
						</view>
					</view>
				</view>
				<view class="touch_detail_item">
					<image src="/static/project/touch_detail.png" mode="aspectFit" style="width: 24rpx;height: 28rpx;"></image>
					<view>查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"cs-device-section",
		props:{
			sectionName: {
				type: String,
				default: "控制器状态"
			},
			rows:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				   // "componentGoodsId": 1,
				   //        "componentGoodsName": "温度计",
				   //        "componentType": "1",
				   //        "electric": "10",
				   //        "humidity": "60",
				   //        "runStatus": 1,
				   //        "temperature": "25",
				   //        "voltage": "12"
			};
		},
		methods:{
			elelist(item){
				var result = [];
				if(item.monitorValues) {
					result = item.monitorValues.map(it=>{
						return {
							name:it.displayName,
							value:(it.value.replace(/[+-]/g, '') + it.unit),
							icon:this.getIcon(item.runStatus, it.value)
						}
					});
				}
				return result;
			},
			getIcon(status, value){
				var url = ''
				if(status == 1) {
					let flag = value[0]
					switch (flag){
						case '+':
							url = '/static/project/level_high.png'
							break;
						case '-':
							url = '/static/project/level_low.png'
							break;
						default:
							url = '/static/project/level_normal.png'
							break;
					}
				} else {
					url = '/static/project/level_warning.png'
				}
				return url;
			},
			onTap(e){
				let row = e.currentTarget.dataset.row;
				this.$emit('OnTapItem', row);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: transparent;
		padding-left: 32rpx;
		padding-right: 32rpx;
		width: 100%;
	}
	.sectionName{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #333333;
		padding-left: 8rpx;
		padding-right: 8rpx;
		margin-bottom: 16rpx;
	}
	.card{
		border-radius: 24rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 4px 0rpx rgba(0, 0, 0, 0.05);
		padding: 16rpx;
		width: 100%;
		flex-shrink: 0;
		overflow: clip;
		
		display: flex;
		flex-direction: column;
	}
	.list{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 32rpx;
	}
	.item_row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.item_col{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.item_col_title{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.item_col_subTitle{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #9CA3AF;
	}
	.item_status{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #00B578;
	}
	.normal{
		color: $power-color-ok;
	}
	.error{
		color: $power-color-error;
	}
	.normal_bkg{
		background: #FAFAFA;
	}
	.error_bkg{
		background: rgba(239, 68, 68, 0.05);
	}
	.item_detail_content{
		border-radius: 12rpx;
		width: 100%;
		padding: 16rpx;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 16rpx;
	}
	.item_detail_name{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.item_detail_value{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		text-align: right;
		letter-spacing: normal;
		color: #000000;
	}
	.item_detail_value_flag{
		
	}
	.item_row_2{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		column-gap: 16rpx;
	}
	.touch_detail_item{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		column-gap: 10rpx;
		margin-top: 16rpx;
		
		
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		text-align: right;
		letter-spacing: normal;
		color: $power-color-primary;
	}
</style>